<!DOCTYPE html>
<html lang="en">
<link>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CategoryReport管理</title>
    <meta name="description" content="CategoryReport管理">
    <meta name="keywords" content="CategoryReport管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式/组件 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/echarts.common.min.js"></script>

<body class="hold-transition">

<div id="app">

    <div id="main" style="width: 1200px;height: 400px"></div>

    <div class="content-header">
        <h1>CategoryReport管理<small>CategoryReport管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>CategoryReport管理</el-breadcrumb-item>
            <el-breadcrumb-item>CategoryReport管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">

            <el-table :data="tableData"
                      style="width:100%">
                <el-table-column
                                        prop="categoryName"
                                        label="类别名称"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="num"
                                        label="数量"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="money"
                                        label="金额"
                                        width="180">
                </el-table-column>

            </el-table>

            <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    @change="findPage">
            </el-date-picker>

        </div>
    </div>

</div>

<script>
    new Vue({
        el: "#app",
        data:{
            tableData:[],
            dateRange:[]
        },
        created(){
            this.findPage();
        },
        methods:{
            findPage(){
                // 获得时间
                console.log(this.dateRange);
                var date1 = this.dateRange[0].Format("yyyy-MM-dd");
                var date2 = this.dateRange[1].Format("yyyy-MM-dd");
                // var date1 = "2012-01-01";
                // var date2 = "2022-01-01";
                axios.get(`/categoryReport/categoryCount.do?date1=${date1}&date2=${date2}`).then( res=>{
                    this.tableData = res.data;

                    // 开始画图
                    let legendData = []; // 图例
                    let numData = []; // 销售量数据
                    let moneyData = []; // 盈利额数据
                    for (var a = 0; a < res.data.length; a++) {
                        legendData.push(res.data[a].categoryName);
                        numData.push({name: res.data[a].categoryName, value: res.data[a].num});
                        moneyData.push({name: res.data[a].categoryName, value: res.data[a].money});
                    }

                    // 创建echarts
                    let yuchen = echarts.init(document.getElementById('main'));

                    var option = {
                        title: {
                            text: '商城一级分类销售图'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            data: legendData
                        },
                        series: [{
                            name: '销售量',
                            type: 'pie',
                            radius: '35%',
                            center: ['40%', '50%'],
                            data: numData
                        },
                            {
                                name: '盈利额',
                                type: 'pie',
                                radius: '35%',
                                center: ['80%', '50%'],
                                data: moneyData
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    yuchen.setOption(option);

                })
            }
        }
    })
</script>

</body>
</html>